<template>
    <div class="container-content">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
                <el-col :span="24" v-if="form.parentId !== 0">
                    <el-form-item label="上级部门" prop="parentId">
                        <treeselect
                            v-model="form.parentId"
                            :options="deptOptions"
                            :normalizer="normalizer"
                            placeholder="选择上级部门"
                            size="small"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="部门名称" prop="deptName">
                        <el-input
                            v-model="form.deptName"
                            placeholder="请输入部门名称"
                            size="small"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="显示排序" prop="orderNum">
                        <el-input-number
                            v-model="form.orderNum"
                            controls-position="right"
                            size="small"
                            :min="0"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="负责人" prop="leader">
                        <el-input
                            v-model="form.leader"
                            placeholder="请输入负责人"
                            size="small"
                            maxlength="20"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="phone">
                        <el-input
                            v-model="form.phone"
                            placeholder="请输入联系电话"
                            size="small"
                            maxlength="11"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="email">
                        <el-input
                            v-model="form.email"
                            placeholder="请输入邮箱"
                            maxlength="50"
                            size="small"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="部门状态">
                        <el-radio-group v-model="form.status">
                            <el-radio
                                v-for="dict in statusOptions"
                                :key="dict.dictValue"
                                :label="dict.dictValue"
                                >{{ dict.dictLabel }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import {
    listDept,
    getDept,
    delDept,
    addDept,
    updateDept,
    listDeptExcludeChild,
} from "@/api/system/dept";
import {
    updatadeptList,
    editdeptList
} from "@/api/bim/outher";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    components: { Treeselect },
     props: ["parentId"],
    data() {
        return {
            flag:false,
            // 部门树选项
            deptOptions: [],
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                parentId: [
                    {
                        required: true,
                        message: "上级部门不能为空",
                        trigger: "blur",
                    },
                ],
                deptName: [
                    {
                        required: true,
                        message: "部门名称不能为空",
                        trigger: "blur",
                    },
                ],
                orderNum: [
                    {
                        required: true,
                        message: "菜单顺序不能为空",
                        trigger: "blur",
                    },
                ],
                email: [
                    {
                        type: "email",
                        message: "'请输入正确的邮箱地址",
                        trigger: ["blur", "change"],
                    },
                ],
                phone: [
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur",
                    },
                ],
            },
            // 状态数据字典
            statusOptions: [],
        };
    },
    methods: {
        /** 转换部门数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.deptId,
                label: node.deptName,
                children: node.children,
            };
        },
        // 表单重置
        reset() {
            this.form = {
                deptId: undefined,
                parentId: undefined,
                deptName: undefined,
                orderNum: undefined,
                leader: undefined,
                phone: undefined,
                email: undefined,
                status: "0",
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd(row) {
            this.reset();
            if (row != undefined) {
                this.form.parentId = row.deptId;
            }

            listDept().then((response) => {
                
                this.deptOptions = response.data
            });
        },
        /** 修改按钮操作 */
        // handleUpdate(row) {
        //     this.reset();
        //     getDept(row.deptId).then((response) => {
        //         this.form = response.data;
        //         this.open = true;
        //         this.title = "修改部门";
        //     });
        //     listDeptExcludeChild(row.deptId).then((response) => {
        //         this.deptOptions = this.handleTree(response.data, "deptId");
        //     });
        // },
        /** 提交按钮 */
        submitForm (cd) {
            this.$refs["form"].validate((valid) => {
                if (this.flag) {
                     editdeptList(this.form).then((response) => {
                            this.msgSuccess("修改成功");
                            cd()
                            this.open = false;
                            this.getList();
                            this.flag=false
                        });
                }else{
                   
                        addDept(this.form).then((response) => {
                            cd()
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    
                }
            });
        },
    },
    created() {
        if (this.parentId!='') {
            updatadeptList(this.parentId).then((res)=>{
                this.form=res.data
                this.flag=true
            })
        }
        this.getDicts("sys_normal_disable").then((response) => {
            this.statusOptions = response.data;
        });
        this.handleAdd();

        
    },
};
</script>
<style lang="scss" scoped></style>
